<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }
        
        .fu {
            list-style-type: none;
            padding: 0;
            margin: 0 auto;
            max-width: 350px;
            position: relative;
            background: #fff;
        }
        
        .fu .but {
            display: none;
        }
        
        .fu .but.active+.tab,
        .fu .but:checked+.tab {
            background: #fff;
            color: #333;
        }
        
        .fu .tab.l-b {
            border-left: 2px solid #181818;
        }
        
        .fu .tab {
            outline: 0;
            float: left;
            cursor: pointer;
            opacity: 1;
            width: 25%;
            line-height: 40px;
            display: block;
            margin: 0;
            position: relative;
            background: #181818;
            color: #fff;
            text-align: center;
            border-top: 2px solid #181818;
            border-right: 2px solid #181818;
        }
        
        .fu .but.active~.iner,
        .fu .but:checked~.iner {
            height: auto;
            opacity: 1;
        }
        
        .fu .iner {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            height: 0;
            opacity: 0;
            overflow: hidden;
            line-height: 22px;
            background: #fff;
            position: absolute;
            top: 42px;
            padding: 0px 40px 0 20px;
            border: 2px solid #181818;
            border-top: 0;
            box-shadow: 0 5px 5px -5px #333;
        }
        
        .fu ul {
            list-style-type: none;
        }
        
        .fu .iner .con {
            opacity: 1;
            padding: 15px 0;
            min-height: 185px;
            transition: opacity 0.1s ease-in;
        }
        
        .fu .arrows {
            display: block;
            width: 60px;
            font-size: 32px;
            bottom: 10px;
            right: 0px;
            position: absolute;
        }
    </style>
</head>

<body>
    <ul class="fu radio">
        <li>
            <input class="but" id="tab-1" type="radio" name="toggle" checked="">
            <label data-title="Tab 1" class="tab l-b" for="tab-1">电影</label>
            <ul class="iner">
                <li class="con">
                    电影是一种表演艺术、视觉艺术及听觉艺术，利用胶卷、录像带或数字媒体将影像和声音捕捉起来，再加上后期的编辑工作而成。 电影是人类知道其确切产生时间和成长历程的艺术，是20世纪以来发展迅速、影响巨大的媒体，是政治、经济、文化三位一体的创意产业。它能准确地“还原”现实世界，“展现”虚拟世界，给人以逼真感。
                    <div class="arrows">
                        <label class="back" for="tab-4">‹</label>
                        <label class="next" for="tab-2">›</label>
                    </div>
                </li>
            </ul>
        </li>
        <li>
            <input class="but" id="tab-2" type="radio" name="toggle">
            <label class="tab" for="tab-2">电视剧</label>
            <ul class="iner">
                <li class="con">
                    电视剧（TV play）是一种专为在电视上播映的演剧形式。它兼容电影、戏剧、 文学、音乐、舞蹈、绘画等元素，是一种适应电视广播特点、融合舞台和电影艺术的表现方法而形成的艺术样式。电视剧随着电视广播事业的诞生而发展起来，幕后有一定的推动使一些电视剧网站也孕育而生。 生活中，电视剧的定义已经狭义化，仅指电视剧集系列，不包括其他形式，分单元剧和连续剧，利用电视技术制作并通过电视网放映。
                    <div class="arrows">
                        <label class="back" for="tab-1">‹</label>
                        <label class="next" for="tab-3">›</label>
                    </div>
                </li>
            </ul>
        </li>
        <li>
            <input class="but" id="tab-3" type="radio" name="toggle">
            <label class="tab" for="tab-3">动漫</label>
            <ul class="iner">
                <li class="con">
                    动漫是动画与漫画的合称。该词早期主要在日本动漫爱好者中使用，正式使用是动漫资讯类月刊《动漫时代》的创刊，后因其概括性强开始普及。
                    <div class="arrows">
                        <label class="back" for="tab-2">‹</label>
                        <label class="next" for="tab-4">›</label>
                    </div>
                </li>
            </ul>
        </li>
        <li>
            <input class="but" id="tab-4" type="radio" name="toggle">
            <label class="tab" for="tab-4">哑剧</label>
            <ul class="iner">
                <li class="con">
                    哑剧是以动作和表情表达剧情的戏剧。哑剧的历史悠久，源远流长。“哑剧”一词源出于希腊语，意思是“模仿者”。哑剧不用台词而凭借形体动作和表情表达剧情的戏剧形式。形体动作是哑剧的基本手段，它的准确性和节奏性不仅具有模仿性，还应具有内心的表现力和诗的意蕴。公元前3世纪，罗马已有哑剧演出。在英国和法国，古代丑角的无声表演多在大型戏剧演出之前进行。
                    <div class="arrows">
                        <label class="back" for="tab-3">‹</label>
                        <label class="next" for="tab-1">›</label>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</body>

</html>